<template>
  <div class="container">
    <el-form label-width="200px">
      <el-tabs>
        <el-tab-pane label="企业微信">
          <el-form-item label="企业corpID">
            <el-input
              v-model="formData.corp_id"
              class="max-w-[400px]"
              placeholder="请输入企业corpID" />
          </el-form-item>
          <el-form-item label="企业AgentId">
            <el-input
              v-model="formData.agent_id"
              class="max-w-[400px]"
              placeholder="请输入企业AgentId" />
          </el-form-item>
          <el-form-item label="企业Secret">
            <el-input
              v-model="formData.secret_key"
              class="max-w-[400px]"
              placeholder="请输入企业Secret" />
          </el-form-item>
          <el-form-item label="企业token">
            <el-input
              v-model="formData.token"
              class="max-w-[400px]"
              placeholder="请输入企业token" />
          </el-form-item>
          <el-form-item label="企业encodingAesKey">
            <el-input
              v-model="formData.aes_key"
              class="max-w-[400px]"
              placeholder="请输入企业encodingAesKey" />
          </el-form-item>
          <el-form-item label="通讯录回调地址">
            <el-input
              v-model="formData.contact_url"
              type="textarea"
              class="max-w-[400px]"
              placeholder="请输入通讯录回调地址"
              disabled />
          </el-form-item>
          <el-form-item label="企业消息回调地址">
            <div>
              <el-input
                v-model="formData.notify_url"
                type="textarea"
                class="min-w-[400px]"
                placeholder="请输入企业消息回调地址"
                disabled />
              <div class="text-[#999]">请配置到企业微信后台回调中。</div>
            </div>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div class="footer">
      <el-button
        type="primary"
        @click="submit"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import {
  getWechatConfigApi,
  saveWechatConfigApi,
} from "@/addon/htscrm/api/system";
// import { IWechatConfig } from "@/addon/htscrm/types/api/system.d.ts";
import { cloneDeep } from "lodash-es";
import { ElMessage } from "element-plus";
import { t } from "@/lang";

const defaultFormData: IWechatConfig = {
  corp_id: "",
  agent_id: "",
  secret_key: "",
  token: "",
  aes_key: "",
  notify_url: "",
  contact_url: "",
};
const formData = ref<IWechatConfig>({ ...cloneDeep(defaultFormData) });

async function getWechatConfig() {
  const res = await getWechatConfigApi();
  formData.value = res.data as IWechatConfig;
}

async function submit() {
  await saveWechatConfigApi(formData.value);
  ElMessage.success(t("save.success"));
}

onMounted(() => {
  getWechatConfig();
});
</script>

<style lang="scss" scoped>
.container {
  background-color: var(--el-bg-color);
  padding: 20px;
}
.footer {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  display: flex;
  padding: 15px;
  justify-content: center;
  background-color: var(--el-bg-color);
}
</style>
